<template>
  <header class="relative w-full">
    <!-- 导航栏组件 -->
    <NavigationBar />
    <!-- 轮播图组件 -->
    <div class="swiper-container w-full h-[60vh]">
      <Swiper 
        :data="['console.log:诸位道友，欢迎来到Airs \u{1F389}', 'system.out.print:探索技术的世界永无止境 !', 'print:记录生活的点滴，分享技术的见解 \u{1F389}']"
        :Ripple="true"
        :src="currentBackgroundImage" 
      />
    </div>
  </header>
</template>

<script setup>
import Swiper from '@/components/Swiper/index.vue'
import NavigationBar from '@/components/NavigationBar.vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router';
import { ref, computed, watch } from 'vue';
import { onMounted, onUnmounted } from 'vue'

// 导入背景图片
import yuhangyuan from '@/assets/yuhangyuan.png'
import xieyan from '@/assets/xieyan.png'
import lanyangyang from '@/assets/lanyangyang.png'
import duola from '@/assets/duola.png'
import yanjing from '@/assets/yanjing.png'
import hai from '@/assets/hai.png'
import fengjing from '@/assets/fengjing.png'


const store = useStore()
const route = useRoute()

const currPath = ref(route.path)

// 根据当前路由获取对应的背景图
const getCurrentBackgroundImage = () => {
  // 根据路由路径返回不同的背景图
  const backgroundMap = {
    '/': yuhangyuan, // 首页使用风景图
    '/about': xieyan, // 关于我页面
    '/message-wall': lanyangyang, // 留言墙页面
    '/article/detail': duola, // 文章详情页面
    '/category': yanjing, // 分类页面
    '/tag': hai, // 文章标签页面
  }
  return backgroundMap[currPath.value] || fengjing // 默认使用风景图
}

const currentBackgroundImage = computed(() => getCurrentBackgroundImage())

// 初始化组件
onMounted(() => {
  // 使用Vue的watch函数来监听路由变化
  const unwatch = watch(() => route.path, () => {
    currPath.value = route.path
  })
    
  // 组件卸载时取消监听
  onUnmounted(() => {
    unwatch()
  })
})
</script>

<style scoped>
/* 轮播图容器样式 */
.swiper-container {
    position: relative;
}
</style>